<template>
    <div class="floor-plan-container">
        <img
                :src="require('@/assets/img/floor-plan.png')"
                alt="房屋结构图"
                class="floor-plan-image"
        >
        <div
                v-for="room in rooms"
                :key="room.id"
                class="room-marker"
                :style="{
        top: room.position.top,
        left: room.position.left,
        backgroundColor: currentRoom === room.id ? '#ff5722' : '#4CAF50'
      }"
                @click="$emit('select-room', room.id)"
                :title="room.name"
        ></div>
    </div>
</template>

<script>
    export default {
        name: 'FloorPlan',
        props: {
            rooms: Array,
            currentRoom: String
        }
    }
</script>

<style scoped>
    .floor-plan-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .floor-plan-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .room-marker {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        transition: all 0.3s;
    }

    .room-marker:hover {
        transform: translate(-50%, -50%) scale(1.5);
    }
</style>